<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="common.html">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="damai-title">
    <div id="yiqing-title">
        请全程佩戴口罩，配合疫情防控工作
    </div>
</div>
<div id="damai-head">
    <a href="#"><img src="img.alicdn.com/tfs/TB1otMASmzqK1RjSZPxXXc4tVXa-167-60.png"></a>
    <div>
        <a>首页</a>
        <a>分类</a>
    </div>
    <div class="search-header" data-spm="searchtxt">
        <img class="i-search" src="//img.alicdn.com/tfs/TB1qv3jxGmWBuNjy1XaXXXCbXXa-34-36.png" alt="搜索">
        <input class="input-search" placeholder="搜索明星、演出、体育赛事" data-spm="dsearchbtn">
        <div class="btn-search" data-spm="dsearchbtn2">搜索</div>
        <div class="list-search-wrap">
            <div class="list-search">
            </div>
        </div>
    </div>
    <div>登录</div>
    <div>二维码</div>
</div>
<div id="damai-mainBody">
    <div id="header">
        <div class="buy-header">
            <div class="stepbar">
                <div class="step-wrap">
                    <div class="step active">
                        <label>选择商品</label>
                        <div class="circle">
                            <div class="text">1</div>
                        </div>
                    </div>
                    <div class="step active half">
                        <label>确认订单信息</label>
                        <div class="circle">
                            <div class="text">2</div>
                        </div>
                    </div>
                    <div class="step ">
                        <label>支付订单</label>
                        <div class="circle">
                            <div class="text">3</div>
                        </div>
                    </div>
                    <div class="step ">
                        <label>收取商品</label>
                        <div class="circle">
                            <div class="text">4</div>
                        </div>
                    </div>
                </div>
                <div class="bar"></div>
            </div>
        </div>
    </div>
    <form id="dingdanForm">
        <div>配送方式</div>
        <div id="peisongfangshi"></div>
        <div>
            观演人
            <div id="watchPerson"></div>
            <input type="button" value="新增观演人" onclick="addWatchPerson()">
            <div class="modal fade" id="myAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                添加常用观演人
                            </h4>
                        </div>
                        <div class="modal-body">
                            <h1>添加常用观演人</h1>
                            <form id="addForm" >
                                <input type="hidden" class="form-control" name="personId">
                                <div class="input-group">
                                    <span class="input-group-addon">观影人名字</span>
                                    <input type="text" class="form-control" name="personName" >
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon"> 证件类型</span>
                                    <select name="papersType">
                                        <option value="idcard">身份证</option>
                                        <option value="gangao">港澳通行证</option>
                                        <option value="taiwan">台湾通行证</option>
                                        <option value="huzhao">护照</option>
                                    </select>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">证件号</span>
                                    <input type="text" class="form-control" name="papersNumber" >
                                </div>
                            </form>
                            <h6>点击保存表示您已阅读并同意以下内容</h6>
                            <p>
                                根据现行法律以及公安、防疫部门对大型活动实名制的要求，实名制的项
                                目在购票时需要提供你的实名信息，并在接收方采取严格信息保护措施的前提下，
                                向主办机构/活动场馆/出票方提供你的实名信息，用于出票、入场核验身份或防疫调查，
                                实名信息包括姓名、身份证（或照/港澳居民来往内地通行证/台湾居民来往大陆通行证）。
                                为方便您迅速下单，您可选择在购票前添加并在购票过程中提交购票人实名信息。
                                为保证信息的真实性和唯一性，我们会基于您所提供的信息通过征信平台或其他常规方式进行实名验证。
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" onclick="addPersonForm()">
                                保存
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
        <div>
            <h2>支付方式</h2>
            <input type="radio" name="payType" value="zhifubao" checked>支付宝
        </div>
        <div>
            <h2>确认订单信息</h2>
            <table class="table table-striped">
                <tr>
                    <th>项目信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>优惠</th>
                    <th>小计</th>
                </tr>
                <tr class="next-table-row last first">
                    <td class="single next-table-cell first" colspan="1" rowspan="1">
                        <div class="next-table-cell-wrapper">
                            <div class="next-row project-name-wrapper" data-spm="list">
                                <div class="next-col project-name-img">
                                    <img src="" data-spm="ditempic">
                                </div>
                                <div class="next-col project-name-right">
                                    <div class="next-row project-name" data-spm="dtitle">
                                        圆谷正版授权奥特曼系列舞台剧《奥特传奇之英雄归来》
                                    </div>
                                    <div class="next-row project-name-perform">
                                        <span>2021.09.11 10:30</span>
                                    </div>
                                    <div class="next-row project-name-venue">
                                        天津 | 民园剧场
                                    </div>
                                    <div class="next-row project-name-tips">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="next-table-cell">
                        <div class="next-table-cell-wrapper">
                            480.00
                        </div>
                    </td>
                    <td class="next-table-cell">
                        <div class="next-table-cell-wrapper">
                            1
                        </div>
                    </td>
                    <td class="next-table-cell">
                        <div class="next-table-cell-wrapper">
                            <span class="no-discount">-</span>
                        </div>
                    </td>
                    <td class="next-table-cell last">
                        <div class="next-table-cell-wrapper" data-spm-anchor-id="a2oeg.orderconfirm.0.i1.69fciJhjiJhjIc">
                            <span class="total">480.00</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>开具发票：请在支付完成后，前往大麦APP开具发票</td>
                    <td colspan="4">配送方式:<span id="peisongSpan"></span></td>
                </tr>
                <tr align="right">
                    <td colspan="5" >
                        <input type="checkbox" name="xieyi" value="1" onclick="orderFormCheckbox()" checked>我已经阅读并同意<a href="#">《订票服务条款》</a><br>
                        同意"票品为不记名凭证，请您妥善保管，遗失不补"
                    </td>
                </tr>
                <tr align="right">
                    实付款：<span id="payMoney"></span>
                </tr>
            </table>
        </div>
    </form>
    <input type="button" value="同意以上协议并提交订单"  onclick="payment()">
</div>
<div id="damai-footer">
    <div class="w1200">
        <ul class="footer__links">

            <li class="footer__links__list"><a href="//help.damai.cn" target="_blank" data-spm="flink0">帮助中心</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//help.damai.cn/helpPage.htm?pageId=69&amp;categoryId=30" target="_blank" data-spm="flink1">公司介绍</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//help.damai.cn/helpPage.htm?pageId=70&amp;categoryId=30" target="_blank" data-spm="flink2">品牌识别</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//help.damai.cn/helpPage.htm?pageId=72&amp;categoryId=30" target="_blank" data-spm="flink3">公司大事记</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//help.damai.cn/helpPage.htm?pageId=40&amp;categoryId=14" target="_blank" data-spm="flink4">协议及隐私权政策</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//jubao.alibaba.com/internet/readme.htm?spm=a2o6e.search.0.0.72f44d15Votov6&amp;site=damai" target="_blank" data-spm="flink5">廉正举报</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//help.damai.cn/helpPage.htm?pageId=58&amp;categoryId=5" target="_blank" data-spm="flink6">联系合作</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//job.alibaba.com/zhaopin/positionList.htm?keyWord=JXU1OTI3JXU5RUE2&amp;_input_charset=UTF-8" target="_blank" data-spm="flink7">招聘信息</a></li>
            <li class="footer__links__grep">|</li>

            <li class="footer__links__list"><a href="//x.damai.cn/markets/special/fangzhapian?spm=a2o6e.home.0.0.75df48d3hqGWGD&amp;wh_ttid=pc" target="_blank" data-spm="flink8">防骗秘籍</a></li>


        </ul>
        <div class="footer__ft">
            <div class="footer__ft_fl">
                <a href="//www.damai.cn/?spm=a2o6e.home.0.0.591b48d3QzpG8B" target="_blank" class="footer__ft__logo">
                    <img src="https://img.alicdn.com/tfs/TB1otMASmzqK1RjSZPxXXc4tVXa-167-60.png">
                </a>
                <div class="footer__ft__code__box">
                    <img class="footer__ft__code" src="//img.alicdn.com/tfs/TB1TBEJSkvoK1RjSZFNXXcxMVXa-280-280.jpg" alt="">
                    <span>APP下载</span>
                </div>
            </div>
            <div class="footer__ft_fr">
                <div class="footer__fr__contact">

                    <a style="margin-left:0;" href="//online.damai.cn/alime/index?from=damai_pc_item&amp;v=3" class="footer__fr__contact__btn alime">在线客服</a>
                </div>
                <ul class="footer__ft__words">
                    <li class="footer__ft__certificate"><a href="https://gw.alicdn.com/imgextra/i2/O1CN01J1OnUU1g76CE6kSh6_!!6000000004094-0-tps-2480-3507.jpg" target="_blank">京ICP证031057号</a></li>
                    <li class="footer__ft__grep">|</li>
                    <li class="footer__ft__certificate"><a href="https://beian.miit.gov.cn/#/Integrated/recordQuery" target="_blank">京ICP备11043884号</a></li>
                    <li class="footer__ft__grep">|</li>
                    <li class="footer__ft__certificate"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502037341" target="_blank">京公网安备11010502037341号</a>
                    </li>
                    <li class="footer__ft__grep">|</li>
                    <li class="footer__ft__certificate"><a href="https://gw.alicdn.com/imgextra/i2/O1CN0154oubE1iLsBEGmx9V_!!6000000004397-2-tps-1694-1138.png" target="_blank">广播电视节目制作经营许可证(京)字第02253号</a></li>
                </ul>
                <ul class="footer__ft__words">
                    <li class="footer__ft__certificate"><a href="https://gw.alicdn.com/imgextra/i2/O1CN01tlZwxM1LiYeoBTfIB_!!6000000001333-0-tps-2480-3507.jpg" target="_blank">网络文化经营许可证 京网文[2019]4082-420号</a></li>
                    <li class="footer__ft__grep">|</li>
                    <li class="footer__ft__certificate"><a href="https://gw.alicdn.com/imgextra/i1/O1CN01V4XPXw1TNxm6UL9RO_!!6000000002371-0-tps-1653-2339.jpg" target="_blank">营业性演出许可证京市演587号</a></li>
                </ul>
                <ul class="footer__ft__words">
                    <li class="footer__ft__certificate">北京大麦文化传媒发展有限公司 版权所有</li>
                    <li class="footer__ft__certificate"><a href="//www.damai.cn/?spm=a2o6e.home.0.0.591b48d3QzpG8B">大麦网</a></li>
                    <li>Copyright 2003-2020 All Rights Reserved</li>
                </ul>
                <ul class="footer__ft__words">
                    <li>举报投诉：damai_tousu@member.alibaba.com   浙江省杭州市余杭区文一西路969号</li>
                </ul>
                <ul class="footer__ft__words">
                    <li>违法不良信息举报电话：020-62108294</li>
                </ul>
                <div class="footer__ft__img">

                    <a rel="nofollow" title="电子营业执照" target="_blank" href="https://gw.alicdn.com/tfs/TB1U0tdqmR26e4jSZFEXXbwuXXa-844-587.png">
                        <img class="footer__ft__img2" alt="" src="//img.alicdn.com/tfs/TB1ZO80pyOYBuNjSsD4XXbSkFXa-141-41.png">
                    </a>

                    <a rel="nofollow" target="_blank" href="https://www.pcisecuritystandards.org/">
                        <img src="//img.alicdn.com/tfs/TB1Y580pyOYBuNjSsD4XXbSkFXa-83-50.png" class="footer__ft__img3">
                    </a>
                    <a target="_blank" href="https://search.szfw.org/cert/l/CX20130327002367002885" id="___szfw_logo___">
                        <img class="footer__ft__img4" src="//img.alicdn.com/tfs/TB1C4nNxTlYBeNjSszcXXbwhFXa-114-42.png">
                    </a>
                    <script type="text/javascript">(function () {
                        document.getElementById('___szfw_logo___').oncontextmenu = function () {
                            return false;
                        }
                    })();</script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        peisong();
        watchPerson();
    })

    function orderFormCheckbox(){
        var a = document.getElementsByName("xieyi");
        for (var i =0 ; i<=a.length;i++){
            if(a[i].checked!=checked){
                $("#subButton").prop("disabled",true)
            }
        }
    }

    function addPersonForm(){
        $.ajax({
            url:"payOrderDjh/addPersonForm",
            data: $("#addForm").serialize(),
            success:function (){
                alert("新增成功");
                $("#myAddModal").modal("hide");
                watchPerson();
            }
        })
    }
    function payment(){
        location.href="../payment/aliapy";
    }

    function addWatchPerson(){
        $("#myAddModal").modal("show");
    }

    $('#myAddModal').on('hidden.bs.modal', function () {

        document.querySelector('#addForm').reset();

    });

    function peisong(){
        $.ajax({
            url:"payOrderDjh/selectPeisong",
            data:{userId:1},
            dataType:"json",
            success:function (data){
                var str = "";
                var sp = "";
                for (var i = 0;i<data.length;i++){
                    str+="<input type ='radio' value='data[i].distrId' name='peisongfangshi' >"+data[i].distrMode
                    sp = data[i].distrMode;
                }
                $("#peisongfangshi").html(str);
                $("#peisongSpan").html(sp);
            }
        })
    }
    function watchPerson(){
        $.ajax({
            url: "payOrderDjh/selectAllWatchPerson",
            data: {userId:1},
            dataType: "json",
            success: function (data){
                var str = "";
                for (var i = 0;i<data.length;i++){
                    str+="<input type='radio' value='data[i].personId' name='watchperson' />"+"<a>"+data[i].personName+"</a>"
                }
                $("#watchPerson").html(str);
            }
        })
    }

</script>
</html>